<template>
  <view class="user-card">
    <view class="card-header">
      <image class="avatar" :src="user.avatar" @click="$emit('edit-avatar')" />
      <view class="user-info">
        <view class="name-line">
          <text class="nickname" @click="$emit('edit-nickname')">{{user.nickname}}</text>
          <text class="membership">{{user.membership}}</text>
        </view>
        <text class="name">姓名: {{user.name}}</text>
        <text class="referral">推荐ID: {{user.referralId}}</text>
        <text class="phone">电话: {{user.phone}}</text>
      </view>
    </view>
    <view class="card-footer">
      <view class="stat-item">
        <text class="value">¥{{user.balance}}</text>
        <text class="label">账户余额</text>
      </view>
      <view class="stat-item">
        <text class="value">{{user.rank}}</text>
        <text class="label">当前排位</text>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  user: {
    type: Object,
    required: true
  }
})

defineEmits(['edit-avatar', 'edit-nickname'])
</script>

<style lang="scss">
@import "@/uni.scss";
.user-card {
  background: linear-gradient(135deg, $primary-color, $secondary-color);
  color: $text-color-inverse;
  padding: 30rpx;
  border-radius: 0 0 20rpx 20rpx;
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255,255,255,0.3);
    }
    
    .user-info {
      flex: 1;
      margin-left: 30rpx;
      
      .name-line {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        
        .nickname {
          font-size: 36rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }
        
        .membership {
          font-size: 24rpx;
          background-color: rgba(0,0,0,0.2);
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
        }
      }
      
      .name, .referral, .phone {
        display: block;
        font-size: 26rpx;
        margin-bottom: 6rpx;
        opacity: 0.9;
      }
    }
  }
  
  .card-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 20rpx;
    border-top: 1rpx solid rgba(255,255,255,0.2);
    
    .stat-item {
      text-align: center;
      
      .value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 6rpx;
      }
      
      .label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}
</style>